<style>
  #app{display: table;width:100%;}
  body{background: #fff;}
.personalcenter   .main-title{text-align: center;font-size:16px;font-weight: normal;margin-bottom: 20px;}
.personalcenter   .des{text-align: center;color:#999;margin-bottom: 2em;}
  /*.login-form{width: 400px;margin:13% auto 0;}*/
.personalcenter .login-page{width:400px;height:400px;margin:0 auto; padding: 20px 30px;
    border-radius: 8px;
    background: #fff;}

 .personalcenter  .login_main{    height: 99.8vh; background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;}
.personalcenter.login_content{    width: 1200px;margin:0 auto;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/

    justify-content: center;
}
.personalcenter .usercenter_header{
	border:1px solid #dcdcdc;
	display: flex;
	height:172px;
	align-items: center;
	margin-top: 20px;
}
.personalcenter .header_left,.header_right{display: flex;padding:20px 50px;}
.personalcenter .header_left{align-items: flex-end;}
.personalcenter .header_text{    margin-left: 27px;    padding-bottom: 20px;}
.personalcenter .header_right .header_text{display: flex;flex-direction: column;padding:0;}
.personalcenter .header_right .header_text span{height:50%;align-items: center;display: flex;}
.personalcenter .usercenter_all{width:100%;}
.personalcenter .content_list{border:1px solid #dcdcdc;margin-top:10px;}
.personalcenter .usercernter_ul{
	display: flex;justify-content: space-between;

}
.personalcenter .usercenter_content{width:49.5%;}

.personalcenter .list_content{    align-items: center;
    padding-left: 16px;
    color: #333;
    display: flex;justify-content: space-between;    height: 110px;
}
.personalcenter .list_btn .el-button{
	    width: 100px;
    height: 35px;
    margin-right: 10px;
    padding:8px;
}
.personalcenter .list_message{
	display: flex;
    align-items: center;
}
.personalcenter .list_content_right{margin-left:20px;}
.personalcenter .list_content_right span{
	display: block;
	color:#333;
	font-size:16px;
}
.personalcenter .list_content_right .list_status{color:#666;margin-top:8px;}
.personalcenter .inv_record_title{margin-top:37px;    font-size: 18px;
    color: #333;
    margin-bottom: 10px;}
 .personalcenter .usercener_all{width:100%;}
</style>
<template>
  <div>
    <div class="login_main">
      <div class="header_index">
        <myHeader></myHeader>

      </div>
		<template v-if="routerPath=='personalcenter'" >

	      <div class="login_content personalcenter">  
	      		<div class="usercenter_all">
	  				<div class="usercenter_header">      			
		      			<div class="header_left">
		      				<div class="header_img">
		      					<img src="../assets/img/userimg.png">
		      				</div>
		      				<div class="header_text">
		      					<span>使用HHT支付交易手续费(50%折扣)</span>
		      					
		      					<span>
		      						<el-switch
									  v-model="onOff"
									  active-color="#13ce66"
									  inactive-color="rgb(191, 203, 217)"
									  active-text="on"
									  inactive-text="off">
									</el-switch>
		      					</span>
		      				</div>
		      			</div>
		      			<div class="header_right">
		      				<div class="header_img">
		      					<img src="../assets/img/userimg.png">
		      				</div>
		      				<div class="header_text">
		      					<span>邀请链接 http://hht.one/#/regist/4BF7F748</span>
		      					<span>邀请码 4BF7F748</span>

		      				</div>
		      			</div>
		      		</div>
	  			</div>   
	      		<div class="usercenter_all usercernter_ul">
	      			<div class="usercenter_content">
		      			<div class="content_list">
		      				<div class="list_header">身份证认证</div>
		      				<div class="list_content">
		      					<div class="list_message">
		      						<div class="list_content_left"><img src="../assets/img/idcard.png"></div>
			      					<div class="list_content_right">
			      						<span>身份认证</span>
			      						<span v-if="isRealName" class="list_status">已认证</span>
			      						<span v-if="!isRealName" class="list_status">未认证</span>
			      					</div>
		      					</div>
		      					<div class="list_btn">
		      						<el-button  @click.native="handEdit" type="default" >修改</el-button>
		      					</div>
		      					
		      				</div>
		      			</div>
		  				<div class="content_list">
		      				<div class="list_header">登录密码</div>
		      				<div class="list_content">
		      					<div class="list_message">
		      						<div class="list_content_left"><img src="../assets/img/idcard.png"></div>
			      					<div class="list_content_right">
			      						<span>登录密码</span>
			      						<span class="list_status">登录时使用</span>
			      					</div>
		      					</div>
		      					<div class="list_btn">
		      					
		      						<el-button   @click.native="setPassword" type="default" >修改</el-button>
		      					</div>
		      					
		      				</div>
		      			</div>
		      			<div class="content_list">
		      				<div class="list_header">手机号码</div>
		      				<div class="list_content">
		      					<div class="list_message">
		      						<div class="list_content_left"><img src="../assets/img/idcard.png"></div>
			      					<div class="list_content_right">
			      						<span>Google验证</span>
			      						<span class="list_status">Google验证</span>
			      					</div>
		      					</div>
		      					<div class="list_btn">
		      						<el-button  @click.native="handEdit" type="default"  disabled >暂未开放</el-button>
		      					</div>
		      					
		      				</div>
		      			</div>
		      		</div>
		      		<div class="usercenter_content">
		      			<div class="content_list">
		      				<div class="list_header">手机号码</div>
		      				<div class="list_content">
		      					<div class="list_message">
		      						<div class="list_content_left"><img src="../assets/img/idcard.png"></div>
			      					<div class="list_content_right">
			      						<span>手机号码</span>
			      						<span class="list_status">使用该手机号码获取短信验证码</span>
			      					</div>
		      					</div>
		      					<div class="list_btn">
		      						<el-button  @click.native="bandPhone" type="default" >修改</el-button>
		      					</div>
		      					
		      				</div>
		      			</div>
		      			<div class="content_list">
		      				<div class="list_header">资金密码</div>
		      				<div class="list_content">
		      					<div class="list_message">
		      						<div class="list_content_left"><img src="../assets/img/idcard.png"></div>
			      					<div class="list_content_right">
			      						<span>资金密码</span>
			      						<span class="list_status">提币、提现需要输入资金密码验证资产</span>
			      					</div>
		      					</div>
		      					<div class="list_btn">
		      						<el-button v-if="!isSetPayPassword"  @click.native="setPayPassword" type="default" >设置</el-button>
		      						<el-button v-if="isSetPayPassword"  @click.native="setPayPassword" type="default" >修改</el-button>
		      					</div>
		      					
		      				</div>
		      			</div>
		      			<div class="content_list">
		      				<div class="list_header">推广佣金</div>
		      				<div class="list_content">
		      					<div class="list_message">
		      						<div class="list_content_left"><img src="../assets/img/idcard.png"></div>
			      					<div class="list_content_right">
			      						<span>推广佣金</span>
			      						<span class="list_status">获得被推荐用户半年内交易手续费的50%做为佣金，被推荐用户享受半年内交易费9折优惠。</span>
			      					</div>
		      					</div>
		      					<div class="list_btn">
		      						<el-button  @click.native="handEdit" type="default" disabled>暂未开放</el-button>
		      					</div>
		      					
		      				</div>
		      			</div>
		      		</div>
	      		</div>
	      		<div class="usercener_all">
	      			<div class="inv_record_title">邀请记录</div>
	      			<el-table ref="multipleTable" :data="list"  style="width: 100%;" >			      
				      <el-table-column prop="roleName" width="150" label="用户名">
				      </el-table-column>			   
				      <el-table-column prop="roleDesc" label="手机号码">			      
				      </el-table-column>
				      <el-table-column prop="roleDesc" label="认证时间">			      
				      </el-table-column>			     
				    </el-table>
				    <!-- table end  -->
				    <!--工具条-->
				    <el-col :span="24" class="toolbar toolbar_footer">			     
				      <el-pagination  layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
				      </el-pagination>
				    </el-col>
	      		</div>
	       
	      </div>
	    </template>
        <template v-else>
	        <router-view></router-view>
        </template>
    
    </div>
   
  </div>
</template>

<script>
import * as users from '../api/users';
import myHeader from './common/header'



var code ; //在全局定义验证码
export default {
  components:{
    myHeader
  },
  data() {
    return {
    	// userId:'152420221979644577',
    	userId:'',
    	list:[],
    	showCount:20,
		total:0,
      	page: 1,
		onOff:true,
      	loginFormRules:{
        userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
      },
      picLyanzhengma:'',
      checkCode:'',
      loginForm:{region:'china'},
      username: '',
      password: '',
      isBtnLoading: false,
      routerPath:'',
      isRealName:false,
      userInfo:'',
      isSetPayPassword:false,
    };
  },
  computed: {
   
  },
  methods: {
 	handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },
    fetchDataUser(){
    	//获取用户信息
    	let para={
    		userId:this.userId,
    	}
	  	users.info.r(para).then((res) => {
	  		console.log(res)
	  		if(res.data.retCode==1){
	  			if(res.data.data.realName){
  					this.isRealName=true;
  				}else{
  					this.isRealName=false;
  				}
  				if(res.data.data.isSetPayPassword==1){
  					this.isSetPayPassword=true;
  				}else{
  					this.isSetPayPassword=false;
  				}
  				this.userInfo=res.data.data;
  				sessionStorage.setItem("localUser",JSON.stringify(res.data.data))
	  		}else{
	  			this.$message.error(res.data.retMsg);
	  		}
	       
	       

	      });
    },
 	fetchData(init) {
      this.loading = true;
      if(!this.$_has([users.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          keyword:this.filters.name
        };
        if(this.groupId!=undefined&&this.groupId!="undefined"&&this.groupId!=""){
          this.$set(para,'groupId',this.groupId)
        }
      users.request.r(para).then((res) => {
        this.total=res.data.data.totalRow;
        this.list = res.data.data.list;
        
        if(this.list!=null){
          this.list.map(x=>{
            this.$set(x,'showIndex',2)  
            this.$set(x,'showClose',false)       
            this.$set(x,'showCloseG',false)       
            this.$set(x,'showIndexG',2)         
          })
        }

        this.loading = false;
      });
    },
  	handEdit(index){
  		this.$router.push('/personalcenter/identity')
  	},
  	setPayPassword(index){
  		this.$router.push('/personalcenter/setpaypassword')
  	},
  	setPassword(){
  		this.$router.push('/personalcenter/setpassword')

  	},
  	bandPhone(){
  		this.$router.push('/personalcenter/setphone')

  	},
  },
	watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": function(){
        this.routerPath=this.$route.path.split("/").pop();
        this.fetchDataUser()

      }
  },
  created() {

       // sessionStorage.setItem('islogin','islogin')
  /* if(sessionStorage.getItem('islogin')!="login"){
   	 this.$router.push('/login');
   }*/
    this.routerPath=this.$route.path.split("/").pop();

    // this.fetchData();
    // sessionStorage.setItem('userId','152420221979644577')//152473775467100000
    // sessionStorage.setItem('userId','152474084604539531')
    this.userId=sessionStorage.getItem('userId')

    this.fetchDataUser();
    
  }
};
</script>
